<template>
  <div class="w-full">
    <q-toolbar class="min-h-[20px] q-gutter-x-sm">
      <div class="">{{ 标题 }}</div>
      <el-button type="primary" icon="plus" @click="子表.加一行()" plain size="small">加一行</el-button>
    </q-toolbar>
    <el-table style="width: 100%" tooltip-effect="dark" :data="单项组" row-key="id" border>
      <el-table-column align="left" label="id" width="80">
        <template #default="scope">
          <el-button type="primary" link icon="link" @click="路由.跳转组件list页(关联组件)">{{ scope.row.id
          }}</el-button>
        </template>
      </el-table-column>
      <a列表字段 :组件="关联组件" :编辑否="true" />
      <el-table-column align="left" label="操作" fixed="right">
        <template #default="scope">
          <el-button type="danger" link icon="delete" @click="子表.删行(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>

</template>

<script setup lang="ts">
import { ref, reactive, computed } from 'vue'
import * as util from 'amtf/utils';
import use路由 from "@/hooks/use路由"
const 路由 = use路由()
const props = withDefaults(defineProps<{
  父组件: 组件;
  父项: Record<string, any>;
  字段名: string;
  标题: string;
}>(), {
  字段名: '',
  标题: '标题'
});

import use子表_父表内嵌 from '@/hooks/use子表_父表内嵌';
console.log(`props.父项 👉`, props.父项)
const 单项组 = props.父项[props.字段名]
const 字段组 = props.父组件.字段组
const 字段 = util.查元素(字段组, props.字段名, '名称')
const 关联组件 = 字段.关联组件

const cfg = {
  父项: props.父项,
  单项组,
  单项模板: {
    图标: 'sunrise'
  },
}
const 子表 = use子表_父表内嵌(cfg)

</script>

<style scoped>
:deep(.el-table .el-table__cell) {
  z-index: auto;
}
</style>
